<template>
    <div class="change">
      <h1>选择新起点</h1>
      <h3>我们希望为您提供更优质的服务</h3>
      <div class="topbg"></div>
      <div class="content">
        <div class="new same" @click="onOld(1)">
          <span class="first">NEW</span>
          <span class="second">您是新用户吗？</span>
          <van-icon name="arrow" class="third"/>
        </div>
        <div class="old same" @click="onOld(2)">
          <span class="first">OLD</span>
          <span class="second">您是老用户吗？</span>
          <van-icon name="arrow" class="third"/>
        </div>
      </div>
      <van-dialog v-model="isshow" title="手机验证" show-btnTitlecancel-button @confirm="onConfirm" @cancel="isshow = false">
        <div class="center">
          <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>
          <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">
            <van-button slot="button" size="small"  type="info" :disabled="disabled" @click="onMessage">{{btnTitle}}</van-button>
          </van-field>
        </div>
      </van-dialog>
    </div>
</template>

<script>
  import { sendcode,oldphoneinfo } from '../api/api';
  import aestool from '@/utils/aestool.js';
    export default {
      name: "change",
      data(){
          return{
            value: '',
            showPicker: false,
            columns: ['新用户', '老用户'],
            userphone:'',
            usersms:'',
            btnTitle:"获取验证码",
            disabled:false,
            isshow:false,
            userinfo:''
          }
      },
      created(){
        this.userinfo = this.$route.query.info
        console.log('this.userinfo',this.userinfo)
      },
      methods:{
        //新老用户
        onOld(idx){
          //新用户
          if(idx == 1){
            let toastload = this.$toast.loading({
              message: '加载中...',
              forbidClick: true
            });
            let str = this.getNum()
            let params = {
              types: aestool.encrypt('new', str),
              types_s: aestool.encrypt(str, 'Oldphoneinfoqwe0'),
              wxinfo: this.userinfo,
            }
            oldphoneinfo(params).then(res => {
              toastload.clear()
              if (res.Status == 200) {
                sessionStorage.setItem('token', res.Data)
                this.$router.push({
                  path: "/invitation-code",
                  query: {
                    info:this.userinfo
                  }
                })
              } else {
                this.$toast(res.Message)
              }
            })
          }else if(idx == 2){ //老用户
            this.userphone = ''
            this.usersms = ''
            this.isshow = true
          }
        },
        //生成随机数
        getNum(){
          var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
          var nums=""
          for(var i=0;i<16;i++){
            var id = parseInt(Math.random()*61);
            nums+=chars[id];
          }
          return nums
        },
        //确认手机老用户
        onConfirm(){
          if(this.userphone == ''){
            this.$toast("手机号码不能为空")
          }else if(this.usersms == ''){
            this.$toast("手机验证码不能为空")
          }else{
            let toastload = this.$toast.loading({
              message: '加载中...',
              forbidClick: true
            });
            let str = this.getNum()
            let params = {
              types:aestool.encrypt('old',str),
              types_s:aestool.encrypt(str,'Oldphoneinfoqwe0'),
              wxinfo:this.userinfo,
              phone:aestool.encrypt(this.userphone,'Oldphoneinfoqwe0'),
              code:aestool.encrypt(this.usersms,'Oldphoneinfoqwe0')
            }
            oldphoneinfo(params).then(res=>{
              toastload.clear()
              if(res.Status == 200){
                sessionStorage.setItem('token',res.Data)
                this.$router.push('/home')
              }else{
                this.$toast(res.Message)
              }
            })
          }
        },
        //发送验证码
        onMessage(){
          //判断输入的手机号是否合法
          if(!this.userphone) {
            this.$toast("手机号码不能为空")
          } else if(!/^1[3456789]\d{9}$/.test(this.userphone)) {
            this.$toast("请输入正确是手机号")
          }else{
            //倒计时
            let time = 60;
            let timer = setInterval(() => {
              if(time == 0) {
                clearInterval(timer);
                this.disabled = false;
                this.btnTitle = "获取验证码";
              } else {
                this.btnTitle =time + '秒后重试';
                this.disabled = true;
                time--
              }
            },1000)
            let params = {
              phone:aestool.encrypt(this.userphone,'123456asdzxcqwe0')
            }
            sendcode(params).then(res=>{
              console.log('验证码',res)
              if(res.Status == 200){
                this.$toast('发送成功！')
              }else{
                this.$toast(res.Message)
              }
            })
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
.change{
  font-size 12px
  padding 50px 16px 0
  h1{
    text-align center
    font-weight 100
  }
  h3{
    text-align center
    font-weight 100
    color #999999

  }
  .topbg{
    height 100px
    background url("../assets/img/old.png") top center no-repeat
    background-size cover
  }
  .content{
    border-radius 6px
    box-shadow 0px 1px 8px #eee
    padding 10px
    .new{
      .first{
        background #5698ec
      }
      .second{
        color #5698ec
      }
      border-bottom 1px solid #e0e0e0
    }
    .old{
      .first{
        background #eb5c56
      }
      .second{
        color #eb5c56
      }
    }
    .same{
      display flex
      justify-content space-around
      align-items center
      padding 20px 10px
      .first{
        width 60px
        height 60px
        border-radius 50%
        font-size 20px
        color #fff
        text-align center
        line-height 60px
      }
      .second{
        font-size 20px
      }
      .third{
        font-size 20px
        color #d2d2d2
      }
    }
  }
 /* .center{
    padding 20px 16px
    .btn{
      background #eec12f
      border-radius 20px
      line-height 38px
      margin 20px 0
      text-align center
      color #fff
    }
  }*/
}
</style>
